<!DOCTYPE html>
<html>
<head>
    {include file="../application/common/header.html" /}
</head>
<style type="text/css">
    #dataTypeAllMenu {
        list-style: none;
        padding-inline-start: 0 !important;
    }
    #dataTypeAllMenu li {
        height: 40px;
        font-size: 14px;
        border-bottom: 1px solid #DACDCD;
        line-height: 40px;
        padding-left: 20px;
    }
    .pager-zdy{
        position: absolute !important;
    }
    .dict-cur {
        background-color: #F2AD4C;
    }
    .dict-cur a {
        color: #fff;
        text-decoration: none;
    }
</style>
<body>
    <div class="easyui-layout" style="width:100%;min-height: 500px;">
        <div data-options="region:'west',title:'字典类别',iconCls:'icon-ok'" style="width:200px;">
          <a href="javascript:void(0)" class="easyui-linkbutton"  plain="true" onclick="addDictType()"><i class="fa fa-plus"></i> 新增</a>
          <a href="javascript:void(0)" class="easyui-linkbutton"  plain="true" onclick="updateDictType()"><i class="fa fa-edit"></i> 编辑</a>
          <ul id="dataTypeAllMenu"></ul>
        </div>
        <div data-options="region:'center'">
            <table id="dataGrid" class="easyui-datagrid"></table>
            <!-- 主界面工具栏 -->
            <div id="toolbar">
                <a href="javascript:void(0)" class="easyui-linkbutton"  plain="true" onclick="addDictData()"><i class="fa fa-plus"></i> 新增</a>
            </div>
        </div>
    </div>
    <!-- 新增管理类别对话框 -->
    <div id="addDictType" class="easyui-dialog" style="width: 400px;height:auto;"  closed="true" >
        <form id="addDictTypeForm" class="easyui-form form-search" >
            <input type="hidden" id="ID" name="ID" />
            <table class="table" style="margin:0 auto;">
                <tr>
                    <td width="30%" class="text-right" >类别名称</td>
                    <td width="60%">
                        <input name="DICT_TYPE_NAME" id="DICT_TYPE_NAME" class="form-control">
                    </td>
                </tr>
                <tr>
                    <td class="text-right" width="40%">编码</td>
                    <td width="60%">
                        <input name="DICT_CODE" id="DICT_CODE" class="form-control">
                    </td>
                </tr>
            </table>
        </form>
    
        <div id="addDictTypeButton" class="tnc m20">
            <a href="javascript:void(0)" class="btn btn-success" onclick="submitDictType()"  plain="true">保存</a>
        </div>
    </div>
    
    <!-- 新增管理类别对话框 -->
    <div id="addDictData" class="easyui-dialog" style="width: 400px;height:auto;"  closed="true" >
        <form id="addDictDataForm" class="easyui-form form-search" >
            <input type="hidden" id="ID" name="ID" />
            <input type="hidden" id="DICT_DATA_KEY" name="DICT_DATA_KEY" />
            <input type="hidden" id="DICT_TYPE_ID" name="DICT_TYPE_ID" />
            <table class="table" style="margin:0 auto;">
                <tr>
                    <td width="30%" class="text-right" >名称</td>
                    <td width="60%">
                        <input name="DICT_DATA_VALUE" id="DICT_DATA_VALUE" class="form-control">
                    </td>
                </tr>
                <tr>
                    <td class="text-right" >是否启用</td>
                    <td>
                        <select name="IS_VALID" id="IS_VALID" class="form-control">
                            <option value="1">启用</option>
                            <option value="0">禁用</option>
                        </select>
                    </td>
                </tr>
            </table>
        </form>
    
        <div id="addDictDataButton" class="tnc m20">
            <a href="javascript:void(0)" class="btn btn-success" onclick="submitDictData()"  plain="true">保存</a>
        </div>
    </div>
    <script type="text/javascript">
        var url = "/commentConf/param_conf";
        var dictTypeAllUrl = url + "/dictType.html";
        var dictDatePageUrl = url + '/pageQuery.html';
        var addUpdateDictTypeUrl = url + "/addUpdateType.html";
        var addUpdateDictDataUrl = url + "/addUpdateData.html";
        var dictTypeByIdUrl = url + "/dictTypeById.html";
        var dictDataByIdUrl = url + "/dictDataById.html";
        var dictCodeExistsUrl = url + "/dictCodeExists.html";

        var dataDataGrid;
        var confirmDialog;
        $(function(){
            initDictType();
        })
        function initDictType(){
            $.ajax({
                url: dictTypeAllUrl,
                type: 'POST',
                dataType: 'json',
                error : function(data) {
                    $.messager.progress('close');
                    $.messager.alert('系统提示', data.msg, 'error');
                },
                success: function (data) {
                    if(data.length == 0) return;
                    var currId = $("#dataTypeAllMenu").find("li.dict-cur").find('a').attr("id");
                    var html = '';
                    data.forEach(function(item,index){
                        var clasz="";
                        if(!currId && index == 0){
                            clasz="class=\"dict-cur\"";
                            currId = item.ID;
                        }else {
                            if(item.ID == currId) clasz="class=\"dict-cur\"";
                        }
                        html += '<li ' + clasz + '><a href="javascript:void(0)" id="' + item.ID + '" onclick="linkDictDate(this)" class="tdictType_link">'+item.DICT_TYPE_NAME+'</a></li>'
                    });
                    initDictData(currId);
                    $("#dataTypeAllMenu").html(html);
                }
            });
        }
        /**
         * 菜单数据表
         */
        function initDictData(id){
            dataDataGrid = $('#dataGrid').datagrid({
                url : dictDatePageUrl,
                fit : true,
                fitColumns : true,
                border : true,
                singleSelect : true,
                pagination : true,
                idField : 'ID',
                autoRowHeight : 800,
                nowrap : true,
                striped : true,
                toolbar:'#toolbar',
                queryParams : {
                    "dictTypeId": id
                },
                columns : [ [{
                        field : 'action',
                        title : '操作',
                        align : 'center',
                        formatter : function(value, row, index) {
                            return '<button  type="button" class="btn btn-warning btn-xs" style="margin:4px 4px;" onclick="updateDictData('+row.ID+');">编辑</button>';
                        }
                    }, {
                        field : 'IS_VALID',
                        align : 'center',
                        title : '<b>状态</b>',
                        formatter:function(value,row,index){
                            if(value == 1){
                                return "启用";
                            }else{
                                return "禁用";
                            }
                        }
                    }, {
                        field : 'DICT_DATA_KEY',
                        align : 'center',
                        title : '<b>字典数据编码</b>'
                    }, {
                        field : 'DICT_DATA_VALUE',
                        align : 'center',
                        title : '<b>字典数据名称</b>'
                    }, {
                        field : 'CREATE_TIME',
                        align : 'center',
                        title : '<b>创建时间</b>'
                    }, {
                        field : 'UPDATE_TIME',
                        align : 'center',
                        title : '<b>修改时间</b>'
                    }
                ]]
            });
        }
        function addDictType(){
            cleanFormPanel("addDictTypeForm");
            $("#addDictTypeForm #DICT_CODE").attr("disabled", false);
            $('#addDictType').dialog('open').dialog('center').dialog('setTitle','新增字典类别');
        }

        function addDictData(){
            cleanFormPanel("addDictDataForm");
            $("#addDictDataForm #DICT_TYPE_ID").val($(".dict-cur >a")[0].id);
            $('#addDictData').dialog('open').dialog('center').dialog('setTitle','新增字典类别');
        }

        function updateDictType() {
            $.ajax({
                url : dictTypeByIdUrl,
                type : "post",
                data : {
                    id : $(".dict-cur >a")[0].id
                },
                dataType : "json",
                async : false,
                success : function(data) {
                    addDictType();
                    $("#addDictTypeForm #ID").val(data.ID);
                    $("#addDictTypeForm #DICT_CODE").val(data.DICT_CODE);
                    $("#addDictTypeForm #DICT_TYPE_NAME").val(data.DICT_TYPE_NAME);
                    $("#addDictTypeForm #DICT_CODE").attr("disabled", true);
                }
            });
        }

        function updateDictData(id) {
            $.ajax({
                url : dictDataByIdUrl,
                type : "post",
                data : {
                    id : id
                },
                dataType : "json",
                async : false,
                success : function(data) {
                    addDictData();
                    $("#addDictDataForm #ID").val(data.ID);
                    $("#addDictDataForm #DICT_TYPE_ID").val(data.DICT_TYPE_ID);
                    $("#addDictDataForm #DICT_DATA_KEY").val(data.DICT_DATA_KEY);
                    $("#addDictDataForm #DICT_DATA_VALUE").val(data.DICT_DATA_VALUE);
                    $("#addDictDataForm #IS_VALID").val(data.IS_VALID);
                }
            });
        }

        function submitDictType() {
            var dictTypeName = $("#DICT_TYPE_NAME").val();
            var dictCode = $("#DICT_CODE").val();
            if(dictTypeName.length == 0) {
                $.messager.alert('系统提示', '类别编码不能为空', 'error');
                return;
            }else if(dictCode.length == 0) {
                $.messager.alert('系统提示', '类别名称不能为空', 'error');
                return;
            }
            if(!$('#addDictTypeForm #ID').val()) {
                $.messager.confirm('系统提示', '确认编码，提交以后编码不能更新了！', function(r) {
                    if (r){
                        commitDictType();
                    }
                });
            }else {
                commitDictType();
            }
        }

        function commitDictType(){
            $.ajax({
                url : addUpdateDictTypeUrl,
                type : 'POST',
                error : function() {
                    $.messager.progress('close');
                    $.messager.alert('系统提示', '操作异常', 'error');
                },
                data : $('#addDictTypeForm').serialize(),
                success : function(data) {
                    $.messager.progress('close');
                    if (data == '000') {
                        $.messager.alert('系统提示', $("#addDictTypeForm #ID").val() == '' ? '字典类别新增成功' : '字典类别修改成功', 'info');
                        initDictType();
                        cleanFormPanel("addDictTypeForm");
                        $('#addDictType').dialog('close')
                    } else {
                        $.messager.alert('系统提示', $("#addDictTypeForm #ID").val() == '' ? '字典类别新增失败' : '字典类别修改失败', 'warning');
                    }
                }
            });
        }

        function submitDictData() {
            var dictDataValue = $("#DICT_DATA_VALUE").val();
            if(dictDataValue.length == 0) {
                $.messager.alert('系统提示', '名称不能为空', 'error');
                $("#DICT_DATA_VALUE").focus();
                return;
            }
            $.ajax({
                url : addUpdateDictDataUrl,
                type : 'POST',
                error : function() {
                    $.messager.progress('close');
                    $.messager.alert('系统提示', '操作异常', 'error');
                },
                data : $('#addDictDataForm').serialize(),
                success : function(data) {
                    $.messager.progress('close');
                    if (data == '000') {
                        $.messager.alert('系统提示', $("#addDictDataForm #ID").val() == '' ? '字典类别新增成功' : '字典类别修改成功', 'info');
                        initDictType();
                        cleanFormPanel("addDictDataForm");
                        $('#addDictData').dialog('close')
                    } else {
                        $.messager.alert('系统提示', $("#addDictDataForm #ID").val() == '' ? '字典类别新增失败' : '字典类别修改失败', 'warning');
                    }
                }
            });
        }

        function linkDictDate(thiz) {
            var lic = $(thiz.closest('li'));
            if(!lic.hasClass('dict-cur')) {
                initDictData(thiz.id);
                lic.addClass("dict-cur").siblings().removeClass("dict-cur");
            }
        }

        $("#DICT_CODE").on("blur", function() {
            var thiz = this;
            var value = this.value;
            if(value.length == 0) return;
            if (!(/^[A-Za-z_-]+$/).test(value)) {
                $.messager.alert('系统提示', '只能输入字母', 'warning');
            }
            $.ajax({
                url : dictCodeExistsUrl,
                type : "post",
                data : {
                    dictCode : this.value
                },
                dataType : "json",
                async : false,
                success : function(data) {
                    if(parseInt(data) > 0) {
                        thiz.value = null;
                        $.messager.alert('系统提示', '输入的编码已存在，请重新输入', 'warning');
                    }
                }
            });
        });

        function cleanFormPanel(formId){
            $('#' + formId)[0].reset();
            $('#' + formId + " #ID").val(null);
        }
    </script>
</body>
</html>